<template>
  <view>
    <Header type="back" title="注册购票信息" />

    <view class="w-100" :class="'h' + bar_h"></view>
    <view
      class="bg-f8ff w-100 ab left0 bottom0 rounded-120-bottom ov-hd-y"
      :class="'top' + bar_h"
    >
      <view class="w-100 px-3">
        <view class="w-100 py-5 fc-a-c">
          <image :src="register.avatar" class="w198 h198 rounded-circle" />
          <!-- <view class="w-100 font28 t-8 pt-2 f-c-c">点击更换头像</view> -->
        </view>

        <view class="w-100 h100 f-c-c py-2">
          <view
            class="w270 h64 font24 bg-theme t-20 font600 f-c-c circle14"
            @click="get_auth_info"
            >获取用户信息</view
          >
        </view>

        <view class="w-100 bg-theme">
          <view class="w-100 h-100 bg-f8ff radius-54-right px-2 py-3">
            <view class="w-100 h80 f-s-c" v-if="register.inviteId">
              <view class="w200 font28">邀请人：</view>
              <input
                class="uni-input border h90 font28 px-2 w476"
                v-model="register.inviteId"
                placeholder="请输入邀请人id(非必填)"
              />
            </view>
            <view class="w-100 h80 f-s-c mb-2">
              <view class="w200 font28">姓名：</view>
              <input
                class="uni-input border h80 font28 px-2 w476"
                v-model="register.name"
                placeholder="请输入昵称"
              />
            </view>
            <view class="w-100 h80 f-s-c mb-2">
              <view class="w200 font28">身份证号：</view>
              <input
                class="uni-input border h80 font28 px-2 w476"
                v-model="register.idCard"
                placeholder="请输入身份证号(非必填)"
              />
            </view>
            <view class="w-100 h80 f-s-c mb-2">
              <view class="w200 font28">手机号：</view>
              <input
                class="uni-input border h80 font28 px-2 w250"
                v-model="register.phone"
                placeholder="请输入手机号码"
              />
              <!-- <button
                class="px-05 w226 bg-theme h80 font24 f-c-c"
                size="mini"
                open-type="getPhoneNumber"
                @getphonenumber.stop="getPhoneNumber"
              >
                获取手机号
              </button> -->
            </view>
            <view class="w-100 h80 f-s-c mb-2" @click="openDatetimePicker">
              <view class="w200 font28">生日：</view>
              <view class="f-s-c">
                <view
                  class="border f-s-c h80 font28 px-2 w476 font30 t-20 font600"
                  >{{ register.birthday || "请选择生日" }}</view
                >
              </view>
            </view>

            <view class="w-100 h80 f-c-c mt-14 mb-2 font28">
              <view class="f-c-c">
                <checkbox
                  style="transform: scale(0.7)"
                  @click="is_ok = !is_ok"
                  :checked="is_ok"
                ></checkbox
                >我已同意
                <text @click="get_sers('yonghu')" class="text-red text-line"
                  >《用户协议》</text
                >和<text class="text-red text-line" @click="get_sers('yingsi')"
                  >《隐私声明》</text
                >
              </view>
            </view>

            <view class="w-100 h100 f-c-c pt-4">
              <view
                class="w270 h90 bg-theme font32 t-20 font600 f-c-c circle14"
                @click="get_register_info()"
                >同意注册</view
              >
            </view>

            <view class="w-100 h202"></view>
          </view>
        </view>
      </view>
    </view>
    <SimpleDateTimePicker
      ref="myPicker_info"
      @submit="handleSubmit"
      :start-year="1974"
      :end-year="2050"
    />
  </view>
</template>

<script>
import {
  getMiniPhoneByCode,
  wxMiniLoginByCode,
  member_add,
  encryptedData,
  loginInfo,
} from "../../api/auth.js";
import { mapState, mapActions } from "vuex";
import Header from "../../components/header.vue";
import SimpleDateTimePicker from "uni_modules/buuug7-simple-datetime-picker/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue";
export default {
  components: {
    SimpleDateTimePicker,
    Header,
  },
  data() {
    return {
      bar_h: 0,
      is_get_phone: "",
      register: {
        inviteId: "",
        idCard: "",
        phone: "",
      },
      is_ok: false,
    };
  },
  created() {
    this.get_wx_s();
    const { statusBarHeight } = uni.getStorageSync("systemInfo");
    this.bar_h = 100 + statusBarHeight / (uni.upx2px(100) / 100); // 状态栏高度  +  预留背景高度 整个背景高度

    let user_info = uni.getStorageSync("userInfo");
    this.register = user_info;
    this.register.name = user_info.nickName;
    this.register.avatar = user_info.avatarUrl;
  },
  methods: {
    ...mapActions("user", ["set_change_is_login"]),
    openDatetimePicker() {
      this.$refs.myPicker_info.show();
    },

    // 关闭picker
    closeDatetimePicker() {
      this.$refs.myPicker_info.hide();
    },
    handleSubmit(e) {
      // {year: "2019", month: "07", day: "17", hour: "15", minute: "21"}
      console.log(e);
      let birthday = `${e.year}-${e.month}-${e.day}`;

      this.$nextTick(() => {
        this.register.birthday = birthday;
      });

      this.$forceUpdate();

      console.log("  this.register", this.register);
      // let date = new Date(`${e.year}-${e.month}-${e.day}`)
      // let data = {
      //  name: `${e.month}-${e.day}`,
      //  title: this.get_day(date.getDay()),
      //  time: `${e.year}${e.month}${e.day}`
      // }
    },
    get_wx_s() {
      uni.login({
        provider: "weixin",
        success: (res) => {
          let data = {
            code: res.code,
          };
          wxMiniLoginByCode(data)
            .then((res) => {
              if (res.code == 0) {
                uni.setStorageSync("token", res.body.token); //存token
                // 是否 已注册
                uni.setStorageSync("is_user", !!res.body.phone);
                if (!!res.body.memberVO) {
                  let userInfo = {
                    ...res.body,
                    token: res.body?.token,
                    openId: res.body?.openId
                  };
                  // 先存用户信息
                  uni.setStorageSync("userInfo", userInfo);
                  this.userInfo = userInfo;
                  // 在设置是否登录 是否登录需要判断是否有用户信息
                  // this.set_change_is_login(true)
                }
              }
            })
            .catch((e) => {
              console.error(e);
            });
        },
        fail: (e) => {
          console.error("ss", e);
          uni.showToast({
            title: "微信登录授权失败",
            icon: "none",
          });
        },
      });
    },

    get_auth_info() {
      uni.showLoading({
        title: "加载中",
      });
      uni.getUserProfile({
        desc: "获取用户基本资料",
        lang: "zh_CN",
        success: (info) => {
          console.log("sss", info);
          uni.setStorageSync("userInfo", info.userInfo);
          // this.register = info.userInfo
          // this.register.name = info.userInfo.nickName
          let phone = this.register.phone;
          this.register = info.userInfo;
          this.register.name = info.userInfo.nickName;
          this.register.avatar = info.userInfo.avatarUrl;
          this.register.phone = phone;
        },
        // 用户取消登录后的提示
        fail: (res) => {
          console.warn("sss", res);
          uni.showModal({
            title: "授权用户信息失败！",
            showCancel: false,
          });
        },
        complete: () => {
          uni.hideLoading();
        },
      });
    },
    getPhoneNumber(e) {
      if (e.detail.errMsg == "getPhoneNumber:ok") {
        getMiniPhoneByCode({ code: e.detail.code }).then((res) => {
          console.log("dddsa", res);
          if (res.code == 0) {
            this.is_get_phone = res.body.phone_info.phoneNumber;
            this.register.phone = res.body.phone_info.phoneNumber;
          } else {
            this.is_get_phone = "";
          }
        });
      } else {
        this.is_get_phone = "";
      }
    },
    buxiangxiel(e) {
      console.log("e", e);
    },
    get_sers(val) {
      uni.navigateTo({
        url: "/pages/my/set/" + val,
      });
    },
    get_register_info() {
      if (!this.is_ok) {
        return uni.showToast({
          title: "请先同意用户协议和隐私声明",
          icon: "none",
        });
      }
      let userInfo = uni.getStorageSync("userInfo");
      let data = {
        avatar: userInfo.avatarUrl,
        name: userInfo.nickName,
        sex: userInfo.gender,
        ...this.register,
      };
      member_add(data).then((res) => {
        console.log(2222, res);
        if (res.code == 0) {
          // this.$refs.user_register.close()
          uni.setStorageSync("userInfo", res.body);
          this.get_login_info_loading();
          // this.userInfo = res.body
        } else if (res.code === 'MEMBER_ERROR_10') {
          this.get_login_info_loading();
        } else {
          uni.showToast({
            title: res.message,
            icon: "none",
          });
        }
      });
    },
    get_login_info_loading() {
      loginInfo({})
        .then((res) => {
          if (res.code == 0) {
            uni.setStorageSync("token", res.body.token); //存token
            // 是否 已注册
            uni.setStorageSync("is_user", !!res.body.memberVO);
            if (!!res.body.memberVO) {
              let userInfo = {
                ...res.body.memberVO,
                token: res.body.token,
                openId: res.body.openId,
              };
              // 先存用户信息
              uni.setStorageSync("userInfo", userInfo);
              this.userInfo = userInfo;
              // 在设置是否登录 是否登录需要判断是否有用户信息
              this.set_change_is_login && this.set_change_is_login(true);

              uni.redirectTo({
                url: "/pages/my/index",
              });
            }
          }
        })
        .catch((e) => {
          console.error(e);
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    get_user_info() {
      uni.showLoading({
        title: "加载中",
      });
      // // 没有用 先留着
      // let parmas = {
      // 	 "encryptedData": this.wx_reg.encryptedData,
      // 	 "iv": this.wx_reg.iv
      // }
      encryptedData({})
        .then((res) => {
          if (res.code == 0) {
            uni.setStorageSync("token", res.body.token); //存token
            // 是否 已注册
            uni.setStorageSync("is_user", !!res.body.memberVO);
            if (!!res.body.memberVO) {
              let userInfo = {
                ...res.body.memberVO,
                token: res.body.token,
                openId: res.body.openId,
              };
              // 先存用户信息
              uni.setStorageSync("userInfo", userInfo);
              this.userInfo = userInfo;
              // 在设置是否登录 是否登录需要判断是否有用户信息
              this.set_change_is_login && this.set_change_is_login(true);
            }
          }
        })
        .catch((e) => {
          console.error(e);
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.rounded-120-bottom {
  border-radius: 0 80rpx 0 0;
}
</style>
